<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script>
// DOM Document Object Model 文档对象模型
// DOM将html文档中的所有内容描绘成一颗节点树（DOM Tree）
// DOM提供了各种方法让JS增删改查DOM树中的每一个节点

// 节点类型：
// 整个文档 文档节点 document
// 每一个html标签 元素节点 div span p h3 ...
// 标签上的属性 属性节点 class="box"  id="box" ...
// 标签中的内容 文本节点 换行空格也属于文本节点
// 文档中的注释 注释节点 <!-- 注释内容 -->
    
// 获取元素节点：
// document.getElementById(id名) 通过id名获取元素
// document.getElementsByName(name属性) 通过name属性获取元素
// document.getElementsByTagName(标签名) 通过标签名获取元素
// document.getElementsByClassName(类名) 通过类名获取元素
// document.querySelector(css选择器) 通过css选择器获取元素（返回第一匹配的元素）
// document.querySelectorAll(css选择器) 通过css选择器获取元素（返回所有匹配的元素）

// document.getElementsByxx和document.querySelectorAll的区别：
// document.getElementsByxx 获取到的是动态集合（长度会随着元素个数改变）
// document.querySelectorAll 获取到的是静态集合（长度不会随着元素个数改变）

// 元素节点的值：
// 1.表单元素使用 value 来设置或获取元素的值
// 2.非表单元素使用 innerText innerHTML textContent 来设置或获取元素的值
// 3.innerText和textContent 设置或获取元素的文本内容（不能解析标签）
// 4.innerHTML设置或获取元素的内容（可以解析标签）

// 修改元素节点的样式：
// dom.style 样式预设对象
// 1.dom.style.width = '200px'; 在行内设置样式
// 2.dom.style.cssText = 'width:200px;height:100px'; 在行内设置样式
// 3.修改元素节点的类名 dom.className = 'xxx';

// 元素节点的nodeType属性值为 1
// 元素节点的nodeName属性值为 大写的标签名
// 元素节点的tagName属性值为 大写的标签名
// 元素节点的nodeValue属性值为 null

// 节点关系：
// parentNode属性返回元素的父节点
// children属性返回元素的所有元素子节点
// childNodes属性返回元素的所有子节点

// firstChild属性返回元素的第一个子节点
// lastChild属性返回元素的最后一个子节点
// previousSibling()属性返回元素的上一个兄弟节点
// nextSibling()属性返回元素的下一个兄弟节点

// firstElementChild属性返回元素的第一个元素子节点
// lastElementChild属性返回元素的最后一个元素子节点
// previousElementSibling()属性返回元素的上一个兄弟元素节点
// nextElementSibling()属性返回元素的下一个兄弟元素节点

// 创建元素节点：document.createElement(标签名)
// 创建文本节点：document.createTextNode(文本)
// parent.appendChild(child)在parent末尾添加child
// parent.insertBefore(new,old)在parent中的old之前添加new
// parent.replaceChild(new,old)在parent中使用new替换old
// parent.removeChild(child)删除parent中的child
// child.remove()删除child
// dom.cloneNode(false)浅拷贝dom（只拷贝dom本身）
// dom.cloneNode(true)深拷贝dom（拷贝dom本身及所有子元素）

</script>
</body>
</html>